import React, { useEffect } from 'react';
import { TimelinePlacementType } from './timeline';
import classNames from 'classnames';

type TimelineTimeTimeType = string;
type TimelineTimeContentType = string;


export interface TimelineItemProps {
    time: TimelineTimeTimeType
    content: TimelineTimeContentType
    placement?: TimelinePlacementType
    iconJSX?: React.ReactNode
    timeJSX?: (time: TimelineTimeTimeType) => React.ReactNode
    contentJSX?: (content: TimelineTimeContentType) => React.ReactNode
    className?: string
    style?: React.CSSProperties
}

const TimelineItem: React.FC<TimelineItemProps> = props => {
    const { time, content, className, style, placement, iconJSX, timeJSX, contentJSX } = props;

    const classes = classNames(className, "yulang-timeline-item-container");

    const styles = {
        '--timeline-right-direction--':
            placement === 'up' ? 'column' : 'column-reverse',
    } as React.CSSProperties;


    const renderIcon = (): React.ReactNode => {
        return iconJSX ? iconJSX : <div className={"yulang-timeline-item-icon"}></div>
    }

    const renderTime = (): React.ReactNode => {
        return timeJSX ? timeJSX(time) : <>{time}</>
    }

    const renderContent = (): React.ReactNode => {
        return contentJSX ? contentJSX(content) : <>{content}</>

    }
    useEffect(() => {
        if (isNaN(Date.parse(time))) {
            console.log("Warn: 时间轴TimelineItem的time值不满足日期格式");
        }
    }, [time])

    return <div
        className={classes}
        style={style}
    >
        <div className={"yulang-timeline-left"}>
            {renderIcon()}
        </div>
        <div className={"yulang-timeline-right"} style={styles}>
            <div className={"yulang-timelime-item-time"}>
                {renderTime()}
            </div>
            <div className={"yulang-timelime-item-content"}>
                {renderContent()}
            </div >
        </div >
    </div >
}

TimelineItem.displayName = "TimelineItem";

export default TimelineItem;